<template>
  <div class="task">
    <div class="tip">
      <div class="common">
        <div class="common-input">
          <el-input v-model="commonValue" placeholder="用户昵称/手机号码" clearable></el-input>
        </div>

        <div class="common-input">
          <el-select v-model="commonUpdateValue" placeholder="请选择" clearable>
            <el-option v-for="item in commonUpdateOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="common-input">
          <el-date-picker v-model="commonDate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>

        <div class="common-button" @click="searchHit">搜索</div>
        <div class="common-button" @click="replacementHit">重置</div>
      </div>
    </div>

    <div class="table" v-loading="loading">
      <el-table :data="tableData" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column prop="" label="用户头像" align="center" width="120">
          <template slot-scope="scope">
            <img class="imgs" :src="scope.row.avatar" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" width="200">
        </el-table-column>
        <el-table-column prop="phone" label="用户手机号" width="150">
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称" width="250">
        </el-table-column>
        <el-table-column prop="desc" label="审核内容"> </el-table-column>

        <el-table-column prop="createTime" label="提交时间" width="200">
        </el-table-column>
        <el-table-column prop="type" label="状态" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="info">待提交</el-tag>
            <el-tag v-else-if="scope.row.status == 1">已提交</el-tag>
            <el-tag v-else-if="scope.row.status == 2" type="success">审核成功</el-tag>
            <el-tag v-else-if="scope.row.status == 3" type="error">审核失败</el-tag>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="detailsHit(scope.row)">
                查看详情
              </div>

              <div class="list" @click.prevent="auditHit(scope.row)"
                v-if="scope.row.status == 1">
                任务审核
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
        </el-pagination>
      </div>
    </div>

    <!--审核弹出框-->
    <div class="delete">
      <el-dialog title="任务审核" :visible.sync="taskVisible" :before-close="taskClose">
        <div class="delete-title">是否通过任务审核</div>
        <div class="delete-attachment">
          <div class="list" @click="taskRefuse">拒绝</div>
          <div class="list" @click="taskConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { makeTaskauditList, makeTaskauditListAdd } from "@/api/make";

export default {
  data() {
    return {
      commonValue: "",
      commonUpdateOptions: [
        {
          value: "0",
          label: "待提交",
        },
        {
          value: "1",
          label: "已提交",
        },
        {
          value: "2",
          label: "审核通过",
        },
        {
          value: "3",
          label: "审核失败",
        },
      ],
      commonUpdateValue: "",
      commonDate: [],
      commonStart: "",
      commonEnd: "",
      //-----------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      deleteVisible: false,
      loading: false,
      commonObj: {},
      //---------
      taskVisible: false,
    };
  },

  created() {
    this.loading = true;
    this.makeTaskauditListMet();
  },
  methods: {
    makeTaskauditListMet() {
      let params = {
        keyWord: this.commonValue,
        startTime: this.commonStart,
        endTime: this.commonEnd,
        status: this.commonUpdateValue,
        //-----
        pageSize: this.limit,
        pageNo: this.page,
      };

      makeTaskauditList(params).then((res) => {
        if (res.errorCode == null) {
          this.tableData = res.resultData.taskUserList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },
    timeData(date) {
      return date.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        // hour: "2-digit",
        // minute: "2-digit",
        // second: "2-digit",
      });
    },
    searchHit() {
      if (this.commonDate.length > 0) {
        this.commonStart = this.timeData(new Date(this.commonDate[0]));
        this.commonEnd = this.timeData(new Date(this.commonDate[1]));
      } else {
        this.commonStart = "";
        this.commonEnd = "";
      }

      this.page = 1;
      this.loading = true;
      this.makeTaskauditListMet();
    },
    replacementHit() {
      this.commonDate = [];
      this.commonStart = "";
      this.commonEnd = "";
      this.commonValue = "";

      this.commonUpdateValue = "";

      this.page = 1;
      this.loading = true;
      this.makeTaskauditListMet();
    },
    //----
    detailsHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.$router.push({
        path: "/make/task-aduit/task-aduit-list-details",
        query: {
          soucre: 1,
          id: item.taskUserId,
        },
      });
    },
    auditHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.commonObj = item;
      this.taskVisible = true;
    },
    taskClose() {
      this.taskVisible = false;
    },
    taskRefuse() {
      let params = {
        taskUserId: this.commonObj.taskUserId,
        status: 3,
      };

      makeTaskauditListAdd(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("审核拒绝成功！");
          this.loading = true;
          this.makeTaskauditListMet();
          this.taskVisible = false;
        }
      });
    },
    taskConfirm() {
      let params = {
        taskUserId: this.commonObj.taskUserId,
        status: 2,
      };

      makeTaskauditListAdd(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("审核通过成功！");
          this.loading = true;
          this.makeTaskauditListMet();
          this.taskVisible = false;
        }
      });
    },

    //---------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.makeTaskauditListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.makeTaskauditListMet();
    },
  },
};
</script>


<style lang="less" scoped>
@import url("@/assets/css/common.less");
@import url("@/assets/css/delete.less");
</style>